<template>
	<div class="login">
		<div class="layout">
			<div class="layout1">
				<p class="title">登录账号</p>
				<p class="xm">虾米 - 严选商城欢迎您</p>
				<myinput v-model="phone" :icon="'iconshouji54'" :type="'text'" :flag1="true" :value="phone"
						 :placeholder="'请输入手机号'"></myinput>
				<myinput v-model="password" :type="'password'" :value="password"
						 :placeholder="'请输入密码'"></myinput>
				<mybutton @login="login" :value="value" :cls="cls" :phone="phone" :password="password"></mybutton>
				<p @click="forgot" class="forgot">忘记密码</p>
				<p @click="register" class="register">还没有注册？ 立即注册</p>
			</div>
		</div>
	</div>
</template>

<script>
import myinput from '@/components/my/myinput.vue';
import mybutton from '@/components/my/mybutton.vue';
import {requestLogin} from '@/plugins/api/login.js';
import {mapGetters, mapMutations} from 'vuex';

export default {
	name: 'login',
	components: {myinput, mybutton},
	data() {
		return {
			phone: '13500000000',
			password: '666666',
			value: '登录',
			cls: 'dl',
		};
	},
	watch: {},
	computed: {
		...mapGetters({
			getToken: 'getToken'
		})
	},
	created() {

	},
	mounted() {

	},
	methods: {
		...mapMutations({
			setToken: 'setToken'
		}),
		forgot() {
			this.$router.push('/forGotPass');
		},
		register() {
			this.$router.push('/register');
		},
		login(obj) {
			requestLogin(obj).then(res => {
				this.setToken(res.data.token);
				this.$router.push('/index');
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.login {
  .layout {
    width: 90%;
    height: 40rem;
    margin: 20px auto 0;
    border: 1px solid #F5F5F5;
    border-radius: 6px;

    .layout1 {
      width: 80%;
      margin: 0 auto;

      .title {
        margin-top: 2rem;
        font-size: 1.5rem;
        color: #666;
      }

      .xm {
        margin: 1.5rem 0;
        color: #909090;
      }

      .register {
        color: #549ff9;
        text-align: center;
        font-size: 14px;
        margin: 12px 0;
      }

      .forgot {
        height: 16px;
        font-size: 12px;
        text-align: center;
        color: #989898;
        padding: 18px 0;
      }
    }
  }
}
</style>